<template>
    <div>
        <div class="title">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div style="width: 440px; height: 300px;" id="DispatchProportion"></div>
    </div>
</template>
<script>
// import * as Highcharts from 'highcharts';
// import highcharts3d from 'highcharts/highcharts-3d';
// highcharts3d(Highcharts); 

// export default {
//     name: 'hightThreedEcharts',
//     mounted() {
//         this.renderChart();
//     },
//     components:{
//     },
//     methods: {
//         renderChart() {
//             Highcharts.chart("bigbox", {
//                 chart: {
//                     type: 'pie',
//                     options3d: {
//                         enabled: true,
//                         alpha: 60,
//                         beta: 0
//                     },
//                     plotBackgroundColor: null,
//                     plotBorderWidth: null,
//                     plotShadow: false,
//                     style: {
//                         color: 'white'
//                     }
//                 },
//                 title: {
//                     text: "",
//                 },
//                 tooltip: {
//                     enabled: true,
//                     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
//                 },
//                 plotOptions: {
//                     pie: {
//                         allowPointSelect: true,
//                         cursor: 'pointer',
//                         depth: 24,
//                         dataLabels: {//数据标签
//                             enabled: true, //是否启用
//                             format: "{point.name}",
//                             style: { //样式配置
//                                 textOutline: "none", //去掉文字白边
//                                 color: "rgba(45,153,255,1)",
//                                 fontSize: 11,
//                             },
//                         },
//                         textStyle: {
//                             color: '#FFFFFF'
//                         },

//                     }
//                 },
//                 series: [{
//                     type: 'pie',
//                     name: '浏览器占比',
//                     data: [
//                         ['一级1', 45],
//                         ['二级2', 26],
//                         ['三级3', 8.5],
//                         ['四级4', 6.2],
//                         ['五级5', 0.7]
//                     ]
//                 }]
//             });

          
//         }
//     }
// };
import HighCharts from 'highcharts'
export default {
  components: {
  },
  data() {
    return {
      id: 'DispatchProportion',
      option: {
        chart: {
          type: 'pie', //饼图
          backgroundColor: 'rgba(0, 0, 0, 0)', //去掉白色背景
          options3d: {
            enabled: true, //使用3d功能
            alpha: 50, //延y轴向内的倾斜角度
            beta: 0 //图表视图旋转角度
          }
        },
        title: {
          text: '' //图表的标题文字 这个得加上，不然头部会默认有字
        },
        subtitle: {
          text: '' //副标题文字
        },
        tooltip: {
          formatter: function () {
            return (
              this.point.name +
              '<br/><span style="color:' +
              this.color +
              '">\u25CF</span>占比：<b>' +
              this.percentage.toFixed(2) +
              '%</b>'
            )
          },
          style: {
            color: '#000',
            fontSize: 10
          }
        },
        // 去掉右底部的文字
        credits: {
          enabled: false
        },
        // 更改图例文字颜色
        legend: {
          itemStyle: { color: '#cfcfcf' }
        },
        plotOptions: {
          pie: {
            borderColor: '#000',
            borderWidth: 1,
            allowPointSelect: true, //每个扇块能否选中
            cursor: 'pointer', //鼠标指针
            colors: [
              '#bfde43',
              '#d8009d',
              '#9cf6fe',
              '#f47979',
              '#fcf897',
              '#df99fc',
              '#44ff98',
              '#ff7044',
              '#95e0ff',
              '#c419fc',
              '#fcaa19',
              '#2ed72e',
              '#ff44cc',
              '#649ce9',
              '#2896fc',
              '#9344ff',
              '#44f0ff',
              '#fff444'
            ],
            depth: 35, //饼图的厚度
            showInLegend: true, //显示图例

            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
              format: '{point.name}',
              style: {
                //样式配置
                textOutline: 'none', //去掉文字白边
                color: '#dfe9f9',
                fontSize: 11
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            data: []
          }
        ]
      }
    }
  },
  mounted() {
  // 你们只需要把这个数据更换成你们的就好啦
      let data = [
      ['aa', 111],
      ['bb', 65],
      ['cc', 99],
      ['yy', 111],
      ['mm', 65],
      ['kk', 99]
    ]
    this.option.series[0].data = data
    HighCharts.chart(this.id, this.option)
  }
}

</script>
